<template>
  <div class="dy-main MyInsuranceList">
    <div class="dy-header">
       <x-header :right-options="{showMore: false}" :left-options="{preventGoBack:true}" @on-click-back="back">我的保单</x-header>
    </div>
    <div class="dy-body">
      <div class="bodyInfo">
        <scroller lock-x height="100%" ref="scroller">
          <div>
            <div class="InsInfo" v-for="(item,index) in insLists" :key="index">
              <div class="InsList" @click="gotoListDetail(item)">
                <div class="top">
                  <div class="left">保单号{{ item.ExpectIncome }}</div>
                  <div class="right">{{ item.InsureData }}</div>
                </div>
                <div class="bottom">
                  <div class="left">{{ item.riskName }}</div>
                  <div class="right">{{ item.prem }}</div>
                </div>
              </div>
            </div>
            <div class="waringMsg">
              <div>温馨提示</div>
              <div>购买之日起的15个自然日内可向保险公司提出犹豫期撤保</div>
            </div>
          </div>
        </scroller>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      insLists: []
    }
  },
  methods: {
    getMyInsuranceLists () {
      let self = this
      this.$bridge.callhandler('nativeRequest',
        JSON.stringify({'requstSource': 'internetRequest', 'url': 'mstep.do?act=business', 'params': {'method_Name': 'MyInsuranceSearch'}}),
        function (response) {
          response = JSON.parse(response)
          if (response.status === 0 || response.status === '0') {
            self.insLists = response.data.data[0].arrays
          } else {
            alert('fail')
          }
        }
      )
    },
    gotoListDetail (item) {
      this.$router.push({name: 'MyInsuranceDetail', query: {'PrdNum': item.PrdNum, 'PrdName': item.PrdName}})
    },
    back () {
      this.$publicFun.goBack(this)
    }
  },
  created () {
    this.getMyInsuranceLists()
  }
}
</script>

<style lang="less">
.MyInsuranceList{
  .dy-body{
    .bodyInfo{
      height: 100%;
      .InsInfo{
        padding: 0 0.3rem;
        background: #fff;
        border-bottom: 1px solid #EAEAEA;
        .InsList{
          width: 100%;
          height: 1.4rem;
          .top{
            overflow: hidden;
            padding: 0.25rem 0 0.2rem;
          }
          .bottom{
            overflow: hidden;
            padding-bottom: 0.2rem;
          }
          .left{
            float: left;
          }
          .right{
            float: right;
            padding-top: 0.08rem;
          }
        }
      }
      .waringMsg{
        color: #999999;
        font-size: 0.24rem;
        margin-left: 0.3rem;
        margin-top: 0.32rem;
        padding-bottom: 0.2rem;
        >div:nth-child(1){
          margin-bottom: 0.22rem;
        }
      }
    }
  }
}
</style>
